<template>
	<view class="pu_book">
		<!-- 选择版式 -->
		<view class="sel_select">
			<view class="sel_title">选择版式</view>				
			<scroll-view class="sel_scroll" :scroll-x="true">
				<view class="flex">
					<view class="sel_imgbox" :class="{active:format_id==1}" @tap="tab_selimg(1)">
						<image class="sel_img" src="https://oss.yanhuangernv.com/zpupload/20230829/2eab39c8cc540787cd.jpg"></image>
						<view class="img_text">欧式</view>
					</view>
					<view class="sel_imgbox" :class="{active:format_id==2}" @tap="tab_selimg(2)">
						<image class="sel_img" src="https://oss.yanhuangernv.com/zpupload/20230829/cb26dc4f3718ce1a32.jpg"></image>
						<view class="img_text">苏式</view>
					</view>
					<view class="sel_imgbox" :class="{active:format_id==3}" @tap="tab_selimg(3)">
						<image class="sel_img" src="https://oss.yanhuangernv.com/zpupload/20230829/1c5ffc545cb69f13b4.jpg"></image>
						<view class="img_text">牒记式</view>
					</view>
				</view>
			</scroll-view>				
		</view>
		
		<!-- 信息表单 -->
		<view class="info_list">
			<view class="info_title">基本信息</view>
			<view>
				<view class="op_box">
					<view class="op_title">页眉谱名</view>
					<input class="edit_input_tag" v-model="book_info.title" type="text" value="" placeholder="请输入谱名" ></input>
				</view>
				<view class="edit_line"></view>
				<view class="op_box">
					<view class="op_title">卷号</view>
					<input class="edit_input_tag" v-model="book_info.volume_number" type="text" value="" placeholder="请输入卷号" ></input>
				</view>
				<view class="op_box">
					<view class="op_title">堂号</view>
					<input class="edit_input_tag" v-model="book_info.hall_number" type="text" value="" placeholder="请输入卷号" ></input>
				</view>
				<view class="op_box">
					<view class="op_title">编者</view>
					<input class="edit_input_tag" v-model="book_info.upload_name" type="text" value="" placeholder="请输入编者名" ></input>
				</view>
			</view>
		</view>
		
		<view class="book_content">
			<view class="content_top">
				<view class="content_title">谱书内容</view>
				<view class="flex ali-c">
					<view @tap="goEdit" class="editcont">编辑内容</view>
					<image class="editimg" :src="photo_cdn + 'zpupload/static/tablet/more.png'"></image>
				</view>
			</view>
				
			<view class="content_list" v-if="book_list.length">
				<view class="content_item" v-for="(item,index) in book_list" :key="index">
					<image class="bookimg" :src="photo_cdn + 'zpupload/static/zupu/pubook.png'"></image>
					<view class="booktitle">{{item.text}}</view>
				</view>
			</view>
		</view>
		
		<view @tap="tobook" class="book_create">
			<view class="bookte_btn">确认生成</view>
		</view>
	</view>
</template>

<script>
	import{autoCreateBook} from "@/utils/api/zupu.js"
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn} = config.baseUrl;
	export default{
		data(){
			return{
				photo_cdn,
				family_id:'',
				format_id:1,//谱书版式
				book_info:{
					title:'',//页眉谱名					
					volume_number:'',//卷号
					hall_number:'',//堂号
					upload_name:'',//编者
				},
				book_list:[]
			}
		},
		onLoad(option){
			this.family_id = option.family_id?option.family_id:0;
			
		},
		onShow(){
			this.book_list = uni.getStorageSync('book_list');
		},
		methods:{
			// 选择版式
			tab_selimg(index){
				if(this.format_id == index){
					return false;
				}
				this.format_id = index
			},
			//点击确认创建
			tobook(){
				if(!this.book_info.title){
					this.$api.msg("请输入页眉谱名")
					return false;
				}
				if(!this.book_info.upload_name){
					this.$api.msg("请输入编者")				
					return false;
				}
				
				let {book_list} = this;
				let article_ids = book_list.map((item)=>{
					return item.value;
				})
				article_ids = article_ids.join(",");
				autoCreateBook({
					format_id:this.format_id,
					family_id:this.family_id,
					...this.book_info,
					article_ids,
					
				}).then(res=>{
					if(res.code==1){
						this.$api.msg("生成成功！");
						setTimeout(()=>{
							uni.navigateTo({
								url:`/pages/zupu/familytrees/familytrees?family_id=${this.family_id}&tab_pu=3`
							})
						},1000)
					}
				})
			},
			goEdit(){
				uni.removeStorageSync('book_list')
				uni.navigateTo({
					url:`/pages/zupu/pu_book/book_edit/book_edit?family_id=${this.family_id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./book_create.scss"
</style>